import React from 'react';
import TweenOne from 'rc-tween-one';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import { Tabs, Row, Col } from 'antd';
import { Icon } from '@ant-design/compatible';

const TabPane = Tabs.TabPane;

class Content7 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      current: 1,
    };
  }

  onChange = (key) => {
    this.setState({ current: parseFloat(key) });
  };

  render() {
    const { ...props } = this.props;

    return (
      <div {...props} className="home-page-wrapper content7-wrapper">
        <div className="home-page content7">
          <div className="title-wrapper">
            <h1 className="title-h1">蚂蚁金融云提供专业的服务</h1>
            <div>基于阿里云计算强大的基础资源</div>
          </div>

          <OverPack>
            <TweenOne.TweenOneGroup
              key="tabs"
              enter={{
                y: 30,
                opacity: 0,
                delay: 200,
                type: 'from',
              }}
              leave={{ y: 30, opacity: 0 }}
              className="content7-tabs-wrapper"
            >
              <Tabs
                key="tabs"
                onChange={this.onChange}
                activeKey={`${this.state.current}`}
                className="content7-blocks"
              >
                <TabPane
                  key="1"
                  tab={
                    <div className="content7-tag">
                      <Icon type="mobile" className="content7-tag-icon" />
                      <div className="content7-tag-name">PHONE</div>
                    </div>
                  }
                  className="content7-block content7-block0"
                >
                  <TweenOne.TweenOneGroup
                    enter={{
                      y: 30,
                      delay: 300,
                      opacity: 0,
                      type: 'from',
                      ease: 'easeOutQuad',
                    }}
                    leave={null}
                    component=""
                  >
                    {this.state.current === 1 && (
                      <Row
                        key="content"
                        className="content7-content"
                        gutter={24}
                      >
                        <Col className="content7-text" xs={24} md={14}>
                          <span>
                            <h3>技术</h3>
                            <p>
                              丰富的技术组件，简单组装即可快速搭建金融级应用，丰富的技术组件，简单组装即可快速搭建金融级应用。
                            </p>
                            <br />
                            <h3>融合</h3>
                            <p>
                              解放业务及技术生产力，推动金融服务底层创新，推动金融服务底层创新。解放业务及技术生产力，推动金融服务底层创新。
                            </p>
                            <br />
                            <h3>
                              开放
                            </h3>符合金融及要求的安全可靠、高可用、高性能的服务能力，符合金融及要求的安全可靠、高可用、高性能的服务能力。
                          </span>
                        </Col>
                        <Col className="content7-img" xs={24} md={10}>
                          <img src="/images/xBrUaDROgtFBRRL.png" width="100%" alt="img" />
                        </Col>
                      </Row>
                    )}
                  </TweenOne.TweenOneGroup>
                </TabPane>
                <TabPane
                  key="2"
                  tab={
                    <div className="content7-tag">
                      <Icon type="tablet" className="content7-tag-icon" />
                      <div className="content7-tag-name">TABLET</div>
                    </div>
                  }
                  className="content7-block content7-block1"
                >
                  <TweenOne.TweenOneGroup
                    enter={{
                      y: 30,
                      delay: 300,
                      opacity: 0,
                      type: 'from',
                      ease: 'easeOutQuad',
                    }}
                    leave={null}
                    component=""
                  >
                    {this.state.current === 2 && (
                      <Row
                        key="content"
                        className="content7-content"
                        gutter={24}
                      >
                        <Col className="content7-text" xs={24} md={14}>
                          <span>
                            <h3>技术</h3>
                            <p>
                              丰富的技术组件，简单组装即可快速搭建金融级应用，丰富的技术组件，简单组装即可快速搭建金融级应用。
                            </p>
                            <br />
                            <h3>融合</h3>
                            <p>
                              解放业务及技术生产力，推动金融服务底层创新，推动金融服务底层创新。解放业务及技术生产力，推动金融服务底层创新。
                            </p>
                            <br />
                            <h3>
                              开放
                            </h3>符合金融及要求的安全可靠、高可用、高性能的服务能力，符合金融及要求的安全可靠、高可用、高性能的服务能力。
                          </span>
                        </Col>
                        <Col className="content7-img" xs={24} md={10}>
                          <img src="/images/xBrUaDROgtFBRRL.png" width="100%" alt="img" />
                        </Col>
                      </Row>
                    )}
                  </TweenOne.TweenOneGroup>
                </TabPane>
                <TabPane
                  key="3"
                  tab={
                    <div className="content7-tag">
                      <Icon type="laptop" className="content7-tag-icon" />
                      <div className="content7-tag-name">DESKTOP</div>
                    </div>
                  }
                  className="content7-block content7-block2"
                >
                  <TweenOne.TweenOneGroup
                    enter={{
                      y: 30,
                      delay: 300,
                      opacity: 0,
                      type: 'from',
                      ease: 'easeOutQuad',
                    }}
                    leave={null}
                    component=""
                  >
                    {this.state.current === 3 && (
                      <Row
                        key="content"
                        className="content7-content"
                        gutter={24}
                      >
                        <Col className="content7-text" xs={24} md={14}>
                          <span>
                            <h3>技术</h3>
                            <p>
                              丰富的技术组件，简单组装即可快速搭建金融级应用，丰富的技术组件，简单组装即可快速搭建金融级应用。
                            </p>
                            <br />
                            <h3>融合</h3>
                            <p>
                              解放业务及技术生产力，推动金融服务底层创新，推动金融服务底层创新。解放业务及技术生产力，推动金融服务底层创新。
                            </p>
                            <br />
                            <h3>
                              开放
                            </h3>符合金融及要求的安全可靠、高可用、高性能的服务能力，符合金融及要求的安全可靠、高可用、高性能的服务能力。
                          </span>
                        </Col>
                        <Col className="content7-img" xs={24} md={10}>
                          <img src="/images/xBrUaDROgtFBRRL.png" width="100%" alt="img" />
                        </Col>
                      </Row>
                    )}
                  </TweenOne.TweenOneGroup>
                </TabPane>
              </Tabs>
            </TweenOne.TweenOneGroup>
          </OverPack>
        </div>
      </div>
    );
  }
}

export default Content7;
